<template>
  <div class="home">
    <!-- 轮播pc -->
    <swiper
      loop
      class="banner"
      :autoplay="{
        delay: 5000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      }"
      :pagination="{
        el: '.banner-pagination',
        clickable: true,
      }"
      v-if="banner.length"
    >
      <swiper-slide class="banner-slide" v-for="item in banner" :key="item.id">
        <a
          class="banner-slide-image"
          :href="item.url"
          :style="{
            '--pc': 'url(' + item.webimages + ')',
            '--mobile': 'url(' + item.mobileimages + ')',
          }"
        >
        </a>
      </swiper-slide>
      <template #container-start>
        <div class="banner-pagination"></div>
      </template>
    </swiper>
    <!-- 产品推荐 -->
    <product-recommend></product-recommend>
    <!-- 投资者关系 -->
    <investors :data="investors" v-if="investors"></investors>
    <!-- 关于我们 -->
    <about :data="about" :aboutList="aboutList"></about>
    <!-- 集团简介 -->
    <company-profile :data="groupProfile"></company-profile>
  </div>
</template>

<script>
import companyProfile from "../../components/home-company-profile.vue";
import about from "../../components/home-about.vue";
import investors from "../../components/home-investors.vue";
import productRecommend from "@/components/home-product-recommend";
export default {
  components: {
    productRecommend,
    investors,
    about,
    companyProfile,
  },
  data() {
    return {
      banner: [],
      productRecommendNav: [],
      about: [],
      //   aboutList: [],
      groupProfile: null,
      investors: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        //轮播图
        const banner = await this.$request.get("/khcommon/banner", {
          params: {
            navId: 57,
          },
        });
        this.banner = banner.data;

        // 投资者关系

        const investors = await this.$request.get(
          "/Investorservices/InvestorRelationsPage"
        );
        this.investors = investors.data?.serviceContent;
        //关于我们

        const about = await this.$request.get("/Khindex/AboutUs", {
          params: {
            cid: 19,
            //   page: 1,
            // pagenum: 1,
          },
        });
        this.about = about.data.left;

        this.aboutList = about.data.right;

        // 集团简介
        const groupProfile = await this.$request.get("/Khindex/GroupProfile", {
          params: {
            cid: 97,
          },
        });
        this.groupProfile = groupProfile.data;
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  .banner {
    width: 100%;
    height: 770px;

    &-slide {
      height: 100%;

      &-image {
        height: 100%;
        width: 100%;
        display: block;
        background-image: var(--pc);
        background-size: cover;
        background-position: center;
      }
    }
    &-pagination {
      position: absolute;
      bottom: 30px;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 11;
      width: fit-content;

      &::v-deep(.swiper-pagination-bullet) {
        opacity: 1 !important;
      }
    }
  }

  @media screen and (max-width: 1200px) {
    .banner {
      width: fn.rpx(750);
      height: fn.rpx(660);

      &-slide {
        &-image {
          background-image: var(--mobile);
        }
      }

      &-pagination {
        position: absolute;
        bottom: fn.rpx(30);
        left: 0;
        right: 0;
        margin: auto;
        z-index: 11;
        width: fit-content;

        &::v-deep(.swiper-pagination-bullet) {
          opacity: 1 !important;
        }
      }
    }
  }
}
</style>

